<template>
  <div class="about">
    <h1>less 入门</h1>
    <div id="header">
    </div>
    <div class="box">
      <p class="zi">嵌套</p>
      <img class="imgs" src="../assets/logo.png" width="300px" height="250px" alt="">
    </div>
  </div>
</template>
  <script>
   
  </script>
<style lang="less" scoped>
//变量（Variables）
@width: 200px;
@height: @width - 100px;

.bordered {//混合（Mixins）
  border-top: dotted 3px black;
  border-bottom: solid 3px yellow;
}
#header {
  width: @width;
  height: @height;
  background-color: red;
  .bordered();
}
.box{
  //嵌套
  background-color: burlywood;
  .zi{
    font-size: 20px;
    color: yellow;
  }
  .imgs{
    .bordered();
  }
}
</style>
